<template>
  <div class="dialog-container">
    <el-dialog
      v-model="dialogVisible"
      :before-close="handleClose"
      title="选择视频"
      width="40%"
    >
      <div class="table">
        <div class="condition">
          <span class="color_494949 ft12 pr5">视频名称：</span>
          <ElInput
            v-model="CSVideoName"
            class="w164 mr14"
            placeholder="请输入视频名称"
          />
          <ElButton class="settingBtn" type="primary" @click="search">
            查询
          </ElButton>
        </div>
        <ElTable
          ref="multipleTableRef"
          v-loading="loading"
          :border="true"
          :data="tableData"
          @selection-change="handleSelectionChange"
        >
          <ElTableColumn type="selection" width="55" />
          <ElTableColumn label="视频名称" prop="CSVideoName" width="auto" />
          <!-- <ElTableColumn label="视频地址" prop="videoSuffix" width="auto" /> -->
          <ElTableColumn label="视频">
            <template #default="{ row }">
              <div class="video-container">
                <video class="video" controls="controls" :src="row.CSVideo">
                  您的浏览器不支持视频播放
                </video>
              </div>
            </template>
          </ElTableColumn>
          <ElTableColumn label="备注" prop="Remark" width="auto" />
          <ElTableColumn label="视频类型">
            <template #default="{ row }">
              <div>
                {{ row.VideoType == 0 ? '横屏' : '竖屏' }}
              </div>
            </template>
          </ElTableColumn>
        </ElTable>
        <div v-if="total > 0" class="pagination">
          <ElPagination
            background
            :current-page="searchInfo.pageNo"
            :layout="layout"
            :page-size="searchInfo.pageSize"
            :total="total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="confirm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { ElTable } from 'element-plus'
  import { CSVideoGetPageData } from '@/api/mupro'
  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    videos: {
      type: Array,
      default: () => [],
    },
  })
  const dialogVisible = ref(props.visible)
  const CSVideoName = ref('')
  const multipleTableRef: any = ref(null)
  watch(
    () => props.visible,
    () => {
      dialogVisible.value = props.visible
      if (props.visible) multipleTableRef.value?.clearSelection()
      tableData.value.map((row: any) => {
        props.videos.map((item: any) => {
          if (row.CSVideo === item.CSVideo) {
            multipleTableRef.value?.toggleRowSelection(row, true)
          }
        })
      })
    }
  )
  // 列表
  const searchInfo = reactive({
    pageNo: 1,
    pageSize: 20,
    tableName: '',
    sort: '',
    order: '',
    wheres: `[{"name":"CSVideoName","value":${CSVideoName.value},"displayType":"like"}]`,
    export: false,
    value: '',
  })
  const loading = ref(false)
  const layout = ref('total, sizes, prev, pager, next, jumper')
  const tableData = ref([])
  const total = ref(0)
  // 获取表格数据
  const gettableData = async () => {
    loading.value = true
    const { data } = await CSVideoGetPageData(searchInfo)
    loading.value = false
    tableData.value = data?.rows || []
    tableData.value.map((item: any) => {
      item.videoSuffix = item.CSVideo.substring(
        item.CSVideo.lastIndexOf('/') + 1,
        item.CSVideo.length
      )
      item.videoSuffix = `/${item.videoSuffix}`
    })
    total.value = data?.total || 0
  }
  gettableData()
  //分页条数切换
  const handleSizeChange = (val: any) => {
    searchInfo.pageSize = val
    gettableData()
  }
  //分页切换
  const handleCurrentChange = (val: any) => {
    searchInfo.pageNo = val
    gettableData()
  }
  // 搜索
  const search = () => {
    searchInfo.pageNo = 1
    if (CSVideoName.value.trim() !== '') {
      const arr = []
      CSVideoName.value.trim() !== '' &&
        arr.push({
          name: 'CSVideoName',
          value: CSVideoName.value,
          displayType: 'like',
        })
      searchInfo.wheres = JSON.stringify(arr)
    } else {
      searchInfo.wheres = `[{"name":"CSVideoName","value": '',"displayType":"like"}]`
    }
    gettableData()
  }
  const multipleSelection: any = ref([])
  const handleSelectionChange = (val: any[]) => {
    multipleSelection.value = val
  }
  const emit = defineEmits(['close', 'confirm'])
  const handleClose = () => {
    dialogVisible.value = false
    emit('close', dialogVisible.value)
  }
  const confirm = () => {
    if (multipleSelection.value.length === 0) {
      ElMessage({
        message: '请选择视频',
        type: 'warning',
      })
      return
    }
    emit('confirm', multipleSelection.value)
    // dialogVisible.value = false
  }
</script>

<style lang="scss" scoped>
  .table {
    .condition {
      margin-bottom: 20px;
      .color_494949 {
        color: #494949;
      }

      .w164 {
        width: 164px;
      }

      .mb20 {
        margin-bottom: 20px;
      }

      .mr14 {
        margin-right: 14px;
      }
    }

    .video-container {
      height: 60px;

      .video {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }
  .tag {
    font-size: 14px;
  }
</style>
